<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">分销商审核管理</div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table size="small" :data="tableData">
          <el-table-column align="center" type="index"> </el-table-column>
          <el-table-column align="center" prop="commpanyImg" label="logo">
            <template slot-scope="scope">
              <div
                style="display: flex; align-items: center; flex-direction: column;"
              >
                <el-image
                  style="width: 40px; height: 40px;"
                  :src="scope.row.commpanyImg"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="commpanyName" label="分销名">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="申请人">
          </el-table-column>
          <el-table-column align="center" prop="commpanyAddress" label="地址">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="remark"
            label="审核状态"
          >
            <template slot-scope="scope">
              <div
                :class="{
                  text_green: scope.row.eState == 1,
                  text_red: scope.row.eState == 2,
                  text_orange: scope.row.eState == 0
                }"
              >
                {{ stateText(scope.row.eState) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="remark"
            label="审核理由(拒绝)"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            width="200px"
            label="操作"
          >
            <template v-if="scope.row.eState == 0" slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="confirmPass(scope.row)"
                >同意</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="rejectHandle(scope.row)"
                >拒绝</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        title="请输入拒绝理由"
        :visible.sync="rejectVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入理由"
            v-model="remark"
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rejectVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmReject()">确 定</el-button>
        </span>
      </el-dialog>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import { getCheckList, updateCheck } from "../../api/agent";

export default {
  components: { Pagination },
  data() {
    return {
      // 目前没有做列表处理 后续需要多功能控制在进行优化处理
      tableData: [],
      rejectVisible: false,
      currentId: null,
      remark: "",
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    };
  },

  created() {
    this._getCheckList();
  },
  methods: {
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this._getCheckList();
    },

    stateText(val) {
      switch (val) {
        case 0:
          return "待审核";
        case 1:
          return "审核通过";
        case 2:
          return "拒绝";
        default:
          return "";
      }
    },

    // 审核通过
    confirmPass(s) {
      this.$confirm(`确定通过吗？`, "确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let data = {
            id: s.id,
            state: 1
          };
          updateCheck(data).then(res => {
            if (res.data) {
              this.$message.success("操作成功");
              this._getCheckList();
            }
          });
        })
        .catch(action => {
          this.$message.info("取消");
        });
    },

    rejectHandle(row) {
      this.currentId = row.id;
      this.remark = "";
      this.rejectVisible = true;
    },

    //拒绝
    confirmReject() {
      if (!this.remark) {
        return this.$message.error("请输入原因");
      }
      let data = {
        id: this.currentId,
        state: 2,
        Remark: this.remark
      };
      updateCheck(data).then(res => {
        if (res.data) {
          this.$message.success("操作成功");
          this.rejectVisible = false;
          this._getCheckList();
        }
      });
    },

    //关闭弹框
    handleClose() {
      this.rejectVisible = false;
    },

    // 获取审核列表
    async _getCheckList() {
      let res = await getCheckList(this.pageparm);
      if (res.data) {
        let { items, totalCount } = res.data;
        this.pageparm.total = totalCount;
        this.tableData = items;
      } else {
        this.tableData = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.text_orange {
  color: orange;
}
.text_green {
  color: green;
}
.text_red {
  color: red;
}
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  overflow-y: scroll;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
/deep/.el-table .warning-row {
  background: rgb(233, 232, 232) !important;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
